<template>
  <div
    class="app-main-content"
    style="height: 96%">
    <div>
      <div class="leftButton">
        <div>
          <el-row>
            <el-button
              v-oauth
              data-oauthUuid="1620438709000"
              type="primary"
              icon="el-icon-plus"
              @click="addOne">
              创建
            </el-button>
            <el-button
              v-oauth
              data-oauthUuid="1620438725000"
              type="primary"
              icon="el-icon-edit"
              :disabled="selectedTableNode.length !== 1"
              @click="modifyOne">
              修改
            </el-button>
            <el-button
              v-oauth
              data-oauthUuid="1620438737000"
              type="danger"
              icon="el-icon-delete"
              :disabled="selectedTableNode.length === 0"
              @click="mulDelete">
              删除
            </el-button>
          </el-row>
        </div>
        <div>
          <el-button @click="reset('parent')">
            重置
          </el-button>
          <el-button
            type="primary"
            v-oauth
            data-oauthUuid="1620438761000"
            @click="showSearchDialog('parent')">
            查询
          </el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 16px">
      <scmsa-table
        ref="table"
        v-loading="orderLoading"
        highlight-current-row
        :column="basicColumn"
        :data="tableDatas"
        pagination
        :height="tableTopHeight"
        :total="totalOrder"
        border
        align="center"
        :current-page="orderQuery.page"
        :page-size="orderQuery.size"
        :row-key="(row) => row.id"
        @current-change="handleCurrentChange"
        @selection-change="selectionRowsChange"
        @size-change="handlePageSizeChange"
        @pagination-current-change="handlePageCurrentChange" />
    </div>
    <el-divider></el-divider>
    <div style="margin-top: 8px">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick">
        <el-tab-pane
          label="产品规范标准信息"
          name="first">
        </el-tab-pane>
        <el-tab-pane
          label="产品规范用途信息"
          name="second">
        </el-tab-pane>
      </el-tabs>
      <div>
        <div class="leftButton">
          <div>
            <el-row>
              <el-button
                v-oauth
                data-oauthUuid="1620438814000"
                type="primary"
                :disabled="!currentRow"
                icon="el-icon-plus"
                @click="addChildOne">
                增加
              </el-button>
              <el-button
                v-oauth
                data-oauthUuid="1620438832000"
                type="primary"
                icon="el-icon-edit"
                :disabled="selectedChildNode.length !== 1"
                @click="modifyChildOne">
                修改
              </el-button>
              <el-button
                v-oauth
                data-oauthUuid="1620438848000"
                type="danger"
                icon="el-icon-delete"
                :disabled="!selectedChildNode.length"
                @click="mulDeleteChild">
                删除
              </el-button>
            </el-row>
          </div>
          <div>
            <el-button @click="reset('child')">
              重置
            </el-button>
            <el-button
              type="primary"
              v-oauth
              data-oauthUuid="1620438864000"
              @click="showSearchDialog('child')">
              查询
            </el-button>
          </div>
        </div>
      </div>
      <scmsa-table
        ref="childTable"
        v-loading="childLoading"
        style="margin-top: 16px"
        highlight-current-row
        :column="basicChildColumn"
        :data="childDatas"
        pagination
        :height="tableTopHeight"
        :total="childTotal"
        border
        align="center"
        :current-page="orderQuery.page"
        :page-size="orderQuery.size"
        :row-key="(row) => row.id"
        @current-change="handleCurrentChildChange"
        @selection-change="selectionRowsChildChange"
        @size-change="handlePageSizeChildChange"
        @pagination-current-change="handlePageCurrentChildChange" />
      <productModal
        ref="productModal"
        @appendData="appendData" />
      <childModal
        ref="childModal"
        @appendData="appendData" />
      <purposeModal
        ref="purposeModal"
        @appendData="appendData" />
    </div>
    <el-dialog
      v-if="showSearchMod"
      v-dialogDrag="showSearchMod"
      :close-on-click-modal="false"
      title="搜索"
      width="60%"
      :visible.sync="showSearchMod">
      <query-form
        ref="qform"
        :is-more-query="true"
        :options="searchOptions[searchMode]"
        @cancel="onCancel"
        @query="onOrgSearch" />
    </el-dialog>
  </div>
</template>

<script>
  import colume from './colume'
  import Api from '@/api/productSpecification.js'
  import productModal from './productModal.vue'
  import childModal from './childModal.vue'
  import purposeModal from './purposeModal.vue'
  import { deepClone } from '@/utils/index'

  export default {
    name: 'ProductSpecification',
    components: {
      productModal,
      childModal,
      purposeModal
    },
    mixins: [colume],
    data() {
      return {
        queryForm: {},
        searchMode: 'parent',
        showSearchMod: false,
        childTotal: 0,
        childDatas: [],
        activeName: 'first',
        currentRow: '',
        selectedTableNode: '',
        selectedChildNode: '',
        currentChildRow: '',
        orderQuery: {
          page: 1,
          size: 10
        },
        childQuery: {
          page: 1,
          size: 10
        },
        orderLoading: false,
        childLoading: false,
        tableDatas: [],
        totalOrder: 0,
        dialogVisible: false
      }
    },
    computed: {
      tableTopHeight() {
        return this.$store.state.settings.tableHeight * 0.4
      }
    },
    mounted() {
      this.refreshList()
    },
    methods: {
      reset(type) {
        if (type === 'parent') {
          if (this.queryForm['parent']) {
            for (const key in this.queryForm['parent']) {
              if (Object.hasOwnProperty.call(this.queryForm['parent'], key)) {
                this.queryForm['parent'][key] = undefined
              }
            }
          }
          this.onOrgSearch({}, 'search')
        } else if (this.activeName === 'first') {
          if (this.queryForm['first']) {
            for (const key in this.queryForm['first']) {
              if (Object.hasOwnProperty.call(this.queryForm['first'], key)) {
                this.queryForm['first'][key] = undefined
              }
            }
          }
          this.onOrgSearch({}, 'search')
        } else {
          if (this.queryForm['second']) {
            for (const key in this.queryForm['second']) {
              if (Object.hasOwnProperty.call(this.queryForm['second'], key)) {
                this.queryForm['second'][key] = undefined
              }
            }
          }
          this.onOrgSearch({}, type)
        }
      },
      showSearchDialog(type) {
        if (type === 'parent') {
          this.searchMode = 'parent'
        } else if (this.activeName === 'first') {
          this.searchMode = 'first'
        } else {
          this.searchMode = 'second'
        }
        if (this.queryForm[this.searchMode]) {
          for (const key in this.queryForm[this.searchMode]) {
            if (Object.hasOwnProperty.call(this.queryForm[this.searchMode], key)) {
              const element = this.queryForm[this.searchMode][key]
              this.searchOptions[this.searchMode].some(ii => {
                if (ii.key === key) {
                  ii.defaultVal = element
                  return true
                }
              })
            }
          }
        }
        this.showSearchMod = true
      },
      onCancel() {
        this.showSearchMod = false
      },
      onOrgSearch(queryParms, type) {
        if ((type && type === 'parent') || this.searchMode === 'parent') {
          this.queryForm['parent'] = deepClone(queryParms)
          this.orderQuery = {
            page: 1,
            size: this.orderQuery.size,
            ...this.queryForm['parent']
          }
          this.refreshList()
        } else if ((type && type === 'first') || this.searchMode === 'first') {
          this.queryForm['first'] = deepClone(queryParms)
          this.childQuery = {
            page: 1,
            size: this.childQuery.size,
            ...this.queryForm['first']
          }
          this.onCancel()
          this.getChildList('first')
        } else {
          this.queryForm['second'] = deepClone(queryParms)
          this.childQuery = {
            page: 1,
            size: this.childQuery.size,
            ...this.queryForm['second']
          }
          this.onCancel()
          this.getChildList('second')
        }
      },
      handleClick(tab, event) {
        this.childQuery.page = 1
        this.childQuery.size = 10
        this.getChildList()
        this.$nextTick(() => {
          this.$refs.childTable.$refs.elTable.doLayout()
        })
      },
      addChildOne() {
        if (this.activeName === 'first') {
          this.$refs.childModal.show(this.currentRow)
        } else {
          this.$refs.purposeModal.show(this.currentRow)
        }
      },
      modifyChildOne() {
        if (this.activeName === 'first') {
          this.$refs.childModal.show(this.currentRow, this.selectedChildNode[0])
        } else {
          this.$refs.purposeModal.show(this.currentRow, this.selectedChildNode[0])
        }
      },
      mulDeleteChild() {
        const ids = this.selectedChildNode.map((item) => item.id)
        if (this.activeName === 'first') {
          this.$confirm('请确认是否删除已选产品规范标准信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Api.mulDeleteDesc(ids).then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.appendData('refreshChild')
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$confirm('请确认是否删除已选产品规范用途信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Api.mulDeleteUsage(ids).then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.appendData('refreshChild')
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      addOne() {
        this.$refs.productModal.show()
      },
      modifyOne() {
        this.$refs.productModal.show(this.selectedTableNode[0])
      },
      mulDelete() {
        const ids = this.selectedTableNode.map((item) => item.id)
        this.$confirm('请确认是否删除已选产品规范基本信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Api.mulDelete(ids).then((data) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectedTableNode = []
            this.$refs.table.clearSelection()
            this.refreshList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleCurrentChange(val) {
        this.currentRow = val
        this.childQuery.page = 1
        this.childQuery.size = 10
        this.getChildList()
      },
      selectionRowsChange(e) {
        this.selectedTableNode = e
      },
      // 每页条数发生改变时返回值
      handlePageSizeChange(v) {
        this.orderQuery.size = v
        this.orderQuery.page = 1
        this.refreshList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChange(v) {
        this.orderQuery.page = v
        this.refreshList()
      },
      refreshList() {
        this.onCancel()
        this.getOrderList(true)
      },
      getOrderList(isLoading) {
        this.orderLoading = isLoading
        const data = { ...this.orderQuery }
        Api.getList({
          ...data
        }).then((res) => {
          this.tableDatas = res.data
          this.totalOrder = res.total
          this.orderLoading = false
          this.dialogVisible = false
          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.table.$refs.elTable.doLayout()
            })
          }, 0)
        }, () => {
          this.tableDatas = []
          this.totalOrder = 0
          this.orderLoading = false
          this.dialogVisible = false
        }
        )
      },
      handleCurrentChildChange(val) {
        this.currentChildRow = val
      },
      selectionRowsChildChange(e) {
        this.selectedChildNode = e
      },
      // 每页条数发生改变时返回值
      handlePageSizeChildChange(v) {
        this.childQuery.size = v
        this.childQuery.page = 1
        this.getChildList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChildChange(v) {
        this.childQuery.page = v
        this.getChildList()
      },
      appendData(type) {
        if (type === 'refresh') {
          this.selectedTableNode = []
          this.$refs.table.clearSelection()
          this.refreshList()
        } else if (type === 'refreshChild') {
          this.selectedChildNode = []
          this.$refs.childTable.clearSelection()
          this.getChildList()
        }
      },
      getChildList(type) {
        this.childLoading = true
        if ((type && type === 'first') || this.activeName === 'first') {
          this.childQuery.psrNum = this.currentRow.psrNum
          Api.getDescList(this.childQuery).then((resp) => {
            this.childDatas = resp.data
            this.childTotal = resp.total
            this.childLoading = false
            this.$nextTick(() => {
              this.$refs.childTable.$refs.elTable.doLayout()
            })
          }, () => {
            this.childDatas = []
            this.childTotal = 0
            this.childLoading = false
            this.$nextTick(() => {
              this.$refs.childTable.$refs.elTable.doLayout()
            })
          })
        } else {
          this.childQuery.psrNum = this.currentRow.psrNum
          Api.getUsageList(this.childQuery).then(resp => {
            this.childDatas = resp.data
            this.childTotal = resp.total
            this.childLoading = false
            this.$nextTick(() => {
              this.$refs.childTable.$refs.elTable.doLayout()
            })
          }, () => {
            this.childDatas = []
            this.childTotal = 0
            this.childLoading = false
            this.$nextTick(() => {
              this.$refs.childTable.$refs.elTable.doLayout()
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.leftButton {
  display: flex;
  justify-content: space-between;
}
</style>
